<!--
 * @Author: 颜礼田 yanlitian@carleagroup.com
 * @Date: 2024-08-23 17:27:22
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-14 16:00:44
 * @FilePath: \renshe-backend\src\components\Descriptions\ElDescription.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="desc">
    <div v-if="!isNotEmpty(dataSource)" class="empty">暂无详情数据</div>
    <el-descriptions v-else :border="border" :column="col" :size="size">
      <template v-if="proper($slots, 'title', 'slot')" #title>
        <slot name="title">{{ title }}</slot>
      </template>
      <template v-if="proper($slots, 'extra', 'slot')" #extra>
        <slot name="extra"></slot>
      </template>
      <el-descriptions-item
        v-for="item of columns"
        :key="item.prop"
        :align="item.align ?? align"
        :label-align="item.labelAlign ?? labelAlign"
        v-bind="item"
        :label="item.label"
      >
        <template #default>
          <component :is="item.render" :prop="item" :value="proper(dataSource, item.prop)" v-if="item.render" />
          <slot v-else :name="item.prop" :prop="item" :value="proper(dataSource, item.prop)">
            <span>{{ proper(dataSource, item.prop) }}</span>
          </slot>
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { isNotEmpty } from "@/utils/isHelper";
import { Align, ColumnProps, Direction, Directions, LabelAlign, LargeSize, Size } from "./type";
import { computed } from "vue";

export interface DescriptionsProps {
  border?: boolean;
  col?: number;
  size?: Size;
  direction?: Direction;
  extra?: string;
  columns: Array<ColumnProps>;
  title?: string;
  dataSource: Record<string, any>;
  align?: Align;
  labelAlign?: Align;
}

withDefaults(defineProps<DescriptionsProps>(), {
  border: true,
  col: 3,
  size: LargeSize.large,
  direction: Directions.horizontal,
  align: LabelAlign.left,
  labelAlign: LabelAlign.right
});

const proper = computed(() => getProper);
function getProper(obj, key, type = "string") {
  if (!isNotEmpty(obj)) {
    switch (type) {
      case "string":
        return "--";
      case "json":
      case "object":
        return {};
      case "array":
        return [];
      case "slot":
        return false;
    }
  } else {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      const element = obj[key];

      if (!isNotEmpty(obj)) {
        return getProper(null, "key", type);
      }
      return element;
    }
  }
}
</script>

<style lang="scss" scoped>
.desc {
  .empty {
    // 188一定发
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 188px;
  }
  &:deep(.el-descriptions) {
    tr {
      height: 50px;
    }
    .el-descriptions__label {
      width: 180px;
    }
  }
}
</style>
